<template>
  <div class="admin-courses">
    <!-- 侧边栏组件 - 提供系统导航菜单 -->
    <admin-sidebar ref="sidebarRef" :class="{ collapsed: sidebarCollapsed }"/>

    <!-- 主内容区域 - 包含页面所有主要内容 -->
    <div class="main-content" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <!-- 顶部导航栏 - 显示页面标题和侧边栏切换按钮 -->
      <admin-header
          page-title="课程管理"
          :sidebar-collapsed="sidebarCollapsed"
          @toggle-sidebar="toggleSidebar"
      />

      <!-- 核心内容区域 -->
      <div class="content">
        <!-- 课程管理卡片 -->
        <el-card shadow="hover">
          <!-- 操作工具栏 - 包含新增按钮和筛选搜索功能 -->
          <div class="card-header-actions">
            <!-- 新增课程按钮 -->
            <el-button type="primary" @click="showAddDialog">
              <el-icon>
                <Plus/>
              </el-icon>
              新增课程
            </el-button>

            <!-- 搜索输入框 -->
            <el-input
                v-model="searchKeyword"
                placeholder="搜索课程名称"
                class="search-input"
            >
              <template #append>
                <el-button type="primary" @click="handleSearch">
                  <el-icon>
                    <Search/>
                  </el-icon>
                  搜索
                </el-button>
              </template>
            </el-input>

            <!-- 课程类型筛选 -->
            <el-select v-model="filterType" placeholder="课程类型" class="filter-select">
              <el-option label="全部" value=""></el-option>
              <el-option
                  v-for="type in courseTypes"
                  :key="type.id"
                  :label="type.name"
                  :value="type.id"
              ></el-option>
            </el-select>

            <!-- 课程状态筛选 -->
            <el-select v-model="filterStatus" placeholder="课程状态" class="filter-select">
              <el-option label="全部" value=""></el-option>
              <el-option label="上架" value="1"></el-option>
              <el-option label="下架" value="0"></el-option>
            </el-select>
          </div>

          <!-- 课程数据表格 -->
          <el-table
              :data="courses"
              style="width: 100%"
              border
              stripe
              @selection-change="handleSelectionChange"
          >
            <!-- 多选列 -->
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 课程ID列 -->
            <el-table-column prop="id" label="课程ID" width="80"></el-table-column>
            <!-- 课程名称列 -->
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <!-- 课程类型列 - 自定义渲染显示类型名称 -->
            <el-table-column prop="typeId" label="课程类型">
              <template #default="scope">
                {{ getCourseTypeName(scope.row.typeId) }}
              </template>
            </el-table-column>
            <!-- 课程价格列 - 自定义渲染显示货币符号 -->
            <el-table-column prop="price" label="课程价格" width="120">
              <template #default="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <!-- 订单数量列 -->
            <!--            <el-table-column prop="" label="订单数" width="100"></el-table-column>-->
            <!-- 课程状态列 - 使用开关组件控制 -->
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <div class="status-container">
                  <el-tag :type="scope.row.status === '1' || scope.row.status === 1 ? 'success' : 'danger'"
                          class="status-tag">
                    {{ scope.row.status === '1' || scope.row.status === 1 ? '上架' : '下架' }}
                  </el-tag>
                  <el-switch
                      :model-value="scope.row.status === '1' || scope.row.status === 1"
                      @change="toggleStatus(scope.row)"
                      class="status-switch"
                  />
                </div>
              </template>
            </el-table-column>
            <!-- 创建时间列 - 自定义渲染格式化日期 -->
            <el-table-column prop="createTime" label="创建时间">
              <template #default="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>
            </el-table-column>
            <!-- 操作列 - 固定在右侧，包含查看、编辑、删除、章节管理按钮 -->
            <el-table-column label="操作" width="250" fixed="right">
              <template #default="scope">
                <el-button type="primary" text @click="viewCourseDetail(scope.row)">查看</el-button>
                <el-button type="warning" text @click="editCourse(scope.row)">编辑</el-button>
                <el-button type="danger" text @click="deleteCourse(scope.row)">删除</el-button>
                <el-button type="success" text @click="manageChapters(scope.row)">章节管理</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div class="pagination">
            <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-card>

        <!-- 课程表单对话框 - 用于新增和编辑课程 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="1000px"
            :close-on-click-modal="false"
        >
          <el-form
              ref="courseFormRef"
              :model="courseForm"
              :rules="courseRules"
              label-width="120px"
              style="margin-top: 20px"
          >
            <el-form-item label="课程名称" prop="courseName">
              <el-input v-model="courseForm.courseName" placeholder="请输入课程名称"/>
            </el-form-item>
            <el-form-item label="课程类型" prop="courseTypeId">
              <el-select v-model="courseForm.courseTypeId" placeholder="请选择课程类型">
                <el-option
                    v-for="type in courseTypes"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程价格" prop="coursePrice">
              <el-input-number
                  v-model="courseForm.coursePrice"
                  :min="0"
                  :step="0.01"
                  placeholder="请输入课程价格"
              />
            </el-form-item>
            <el-form-item label="课程描述" prop="courseDesc">
              <el-input v-model="courseForm.courseDesc" placeholder="请输入课程描述"/>
            </el-form-item>
            <!-- 移除了普通文本域，只使用富文本编辑器 -->
            <el-form-item label="课程状态" prop="status">
              <el-switch
                  v-model="courseForm.status"
                  active-value="1"
                  inactive-value="0"
              />
            </el-form-item>
            <!-- 课程封面上传组件 -->
            <el-form-item label="课程封面" prop="courseImage">
              <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="handleImageUpload"
                  accept="image/*"
                  :http-request="options => uploadImage(options)"
              >
                <img v-if="courseForm.courseImage" :src="courseForm.courseImage" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="课程简介">
              <!-- 增加样式以确保富文本编辑器能正确显示 -->
              <div style="min-height: 300px;">
                <WangEditor ref="editorRef"/>
              </div>
            </el-form-item>
            <!-- 引入富文本组件 -->

          </el-form>

          <!-- 对话框底部按钮 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
          </template>
        </el-dialog>

        <!-- 章节管理对话框 -->
        <el-dialog
            v-model="chapterDialogVisible"
            :title="`${currentCourseName} - 章节管理`"
            width="800px"
            :close-on-click-modal="false"
        >
          <!-- 章节管理器组件 - 使用v-model双向绑定章节数据 -->
          <chapter-manager
              v-model:chapters="currentChapters"
              :son-courses="sonCourses"
          />

          <!-- 章节管理对话框底部按钮 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="closeChapterDialog">关闭</el-button>
              <el-button type="primary" @click="saveChapters">保存章节</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入Vue核心功能
import {ref, reactive, computed, onMounted} from 'vue'
// 引入路由功能
import {useRouter} from 'vue-router'
// 引入Element Plus图标
import {
  Document,
  Search,
  Plus,
  Upload
} from '@element-plus/icons-vue'
// 引入Element Plus消息组件
import {ElMessage, ElMessageBox} from 'element-plus'
// 引入自定义组件
import AdminSidebar from '@/components/AdminSidebar.vue'
import AdminHeader from '@/components/AdminHeader.vue'
import ChapterManager from '@/components/ChapterManager.vue'
import {uploadImg} from "@/api/FileUpload.js";
import WangEditor from '@/components/WangEditor.vue'
import {queryAll} from "@/api/CourseTypes.js";
import {addCourse, coursesPage} from "@/api/Course.js";
import {addChapter} from "@/api/Chapters.js";
// 路由实例
const router = useRouter()
// 侧边栏折叠状态
const sidebarCollapsed = ref(false)
// 侧边栏引用
const sidebarRef = ref()
// 激活的菜单
const activeMenu = ref('courses')

// 管理员信息 - 从localStorage获取，或使用默认值
const adminInfo = reactive(() => {
  const info = localStorage.getItem('adminInfo')
  if (info) {
    return JSON.parse(info)
  }
  // 为了开发测试，提供一个完整的默认管理员信息
  return {
    name: '管理员',
    username: 'admin',
    isSuperAdmin: true
  }
})()

// 计算属性：判断是否为超级管理员
const isSuperAdmin = computed(() => adminInfo.isSuperAdmin || false)

// 搜索和筛选相关响应式数据
const searchKeyword = ref('') // 搜索关键词
const filterType = ref('') // 课程类型筛选
const filterStatus = ref('') // 课程状态筛选

// 分页相关数据
const pagination = reactive({
  currentPage: 1, // 当前页码
  pageSize: 5, // 每页显示数量
  total: 0
})

// 选中的课程列表
const selectedCourses = ref([])

// 对话框相关状态
const dialogVisible = ref(false) // 课程表单对话框显示状态
const dialogTitle = ref('新增课程') // 对话框标题
const currentCourseId = ref(null) // 当前编辑的课程ID
const courseFormRef = ref(null) // 表单引用

// 章节管理相关状态
const chapterDialogVisible = ref(false) // 章节管理对话框显示状态
const currentChapterCourseId = ref(null) // 当前管理章节的课程ID
const currentCourseName = ref('') // 当前管理章节的课程名称
const currentChapters = ref([]) // 当前章节数据

// 课程类型数据
const courseTypes = ref([])

// 课程表单数据
const courseForm = reactive({
  courseName: '', // 课程名称
  courseTypeId: '', // 课程类型ID
  coursePrice: 0, // 课程价格
  courseDesc: '', // 课程描述
  courseDetail: '',//课程简介
  status: '1', // 课程状态，1表示上架，0表示下架
  courseImage: '' // 课程封面图片
})

// 表单验证规则
const courseRules = {
  courseName: [
    {required: true, message: '请输入课程名称', trigger: 'blur'},
    {min: 2, max: 50, message: '课程名称长度在 2 到 50 个字符', trigger: 'blur'}
  ],
  courseTypeId: [
    {required: true, message: '请选择课程类型', trigger: 'change'}
  ],
  coursePrice: [
    {required: true, message: '请输入课程价格', trigger: 'blur'},
    {type: 'number', min: 0, message: '课程价格不能小于 0', trigger: 'blur'}
  ],
  courseImage: [
    {required: true, message: '请上传课程封面', trigger: 'change'}
  ]
}

// 模拟课程数据 - 实际项目中应从后端API获取
const courses = ref([])
//传递给子组件的课程变量
const sonCourses=ref({});
//自定义文件上传
const uploadImage = (options) => {
  console.log(options)
  //定义formData
  let formData = new FormData()
  formData.append("file", options.file)
  uploadImg(formData).then(res => {
    console.log(res)
    courseForm.courseImage = res.data
  })
}

// 处理菜单选择事件
function handleMenuSelect(key) {
  activeMenu.value = key;
}

// 切换侧边栏折叠状态
function toggleSidebar() {
  sidebarCollapsed.value = !sidebarCollapsed.value;
}

// 处理退出登录
function handleLogout() {
  localStorage.removeItem('adminToken')
  localStorage.removeItem('adminInfo')
  ElMessage.success('退出成功')
  router.push('/admin/login')
}

// 切换课程状态
const toggleStatus = (course) => {
  // 获取当前状态
  const currentStatus = course.status
  // 切换状态值
  const newStatus = (currentStatus === '1' || currentStatus === 1) ? '0' : '1'
  // 更新用户状态
  course.status = newStatus
  // 模拟API调用更新状态
  // updateStatus({"id":user.id,"status":user.status}).then(res=>{
  //   if(res.code===200){
  //     ElMessage.success(`用户${newStatus === '1' ? '启用' : '禁用'}成功`)
  //   }else{
  //     ElMessage.error(`用户${newStatus === '1' ? '启用' : '禁用'}失败`)
  //   }
  // })
}


// 查看课程详情
function viewCourseDetail(course) {
  ElMessageBox.alert(
      `<div>
      <p><strong>课程名称:</strong> ${course.name}</p>
      <p><strong>课程类型:</strong> ${getCourseTypeName(course.typeId)}</p>
      <p><strong>课程价格:</strong> ¥${course.price}</p>
      <p><strong>订单数量:</strong> ${0}</p>
      <p><strong>创建时间:</strong> ${course.createTime}</p>
      <p><strong>课程描述:</strong></p>
      <div style="margin-top: 10px; border: 1px solid #eee; padding: 10px; background-color: rgba(191,255,0,0.1);">
        ${course.description || '<p style="color: #999;">暂无课程描述</p>'}
      </div>
    </div>`,
      '课程详情',
      {dangerouslyUseHTMLString: true} // 允许使用HTML内容
  )
}

// 编辑课程 - 填充表单并打开对话框
function editCourse(course) {
  dialogTitle.value = '编辑课程'
  currentCourseId.value = course.id
  // 将选中课程的数据填充到表单中
  console.log(course)
  dialogVisible.value = true // 打开对话框
  // 对话框显示后，延迟刷新富文本编辑器并设置内容
  setTimeout(() => {
    if (editorRef.value) {
      // 先刷新编辑器
      if (editorRef.value.refresh) {
        editorRef.value.refresh()
      }
      // 然后设置内容
      if (course.detail) {
        editorRef.value.setContent(course.detail)
      }
    }
  }, 300)
}

// 删除课程 - 带确认提示
function deleteCourse(course) {
  ElMessageBox.confirm(
      `确定要删除课程「${course.courseName}」吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  )
      .then(() => {
        // 确认删除，查找并删除课程
        const index = courses.value.findIndex(c => c.id === course.id)
        if (index !== -1) {
          courses.value.splice(index, 1)
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        // 取消删除，不做任何操作
      })
}

// 管理章节 - 打开章节管理对话框
function manageChapters(course) {
  sonCourses.value = course;
  currentChapterCourseId.value = course.id // 设置当前课程ID
  currentCourseName.value = course.name // 设置当前课程名称
  // 深拷贝章节数据，避免直接修改原数据
  currentChapters.value = JSON.parse(JSON.stringify(course.chaptersList || []))
  console.log(currentChapters.value)
  chapterDialogVisible.value = true // 打开章节管理对话框
}

// 关闭章节管理对话框
function closeChapterDialog() {
  //为保存数据库的视频的删除   videoUrl



  chapterDialogVisible.value = false
}

// 重置表单
function resetForm() {
  // 安全地重置表单，避免formRef未初始化时的错误
  if (courseFormRef.value) {
    try {
      courseFormRef.value.resetFields()
    } catch (error) {
      console.log('表单未初始化，跳过resetFields')
    }
  }
  // 手动重置表单数据到默认值
  Object.assign(courseForm, {
    courseName: '',
    courseTypeId: '',
    coursePrice: 0,
    courseDesc: '',
    status: '1',
    courseImage: ''
  })
  currentCourseId.value = null // 清空当前课程ID
}

//查询全部课程类型信息
const queryAllCoursesType = () => {
  //发送异步请求查询所有的课程类别
  queryAll().then(res => {
    courseTypes.value = res.data;
    console.log(courseTypes.value)
  })
}

// 显示新增课程对话框
function showAddDialog() {
  dialogTitle.value = '新增课程'
  resetForm() // 重置表单
  dialogVisible.value = true // 打开对话框
  // 对话框显示后，延迟刷新富文本编辑器以确保正确显示
  setTimeout(() => {
    if (editorRef.value && editorRef.value.refresh) {
      editorRef.value.refresh()
    }
  }, 300)
}

// 提交表单 - 处理新增和编辑逻辑
function submitForm() {
  // 先从富文本编辑器获取内容并保存到courseForm.courseDesc
  if (editorRef.value) {
    courseForm.courseDetail = editorRef.value.getContent()
    console.log("富文本内容:" + courseForm.courseDetail)
  }
  // 表单验证
  courseFormRef.value.validate(valid => {
    if (valid) { // 验证通过
      try {
        if (currentCourseId.value) {
          // 编辑课程逻辑

        } else {
          // 新增课程逻辑
          const newCourse = {
            name: courseForm.courseName, //课程名
            description: courseForm.courseDesc, //课程描述
            detail: courseForm.courseDetail, //课程简介
            image: courseForm.courseImage, //课程封面
            price: courseForm.coursePrice,//课程价格
            originalPrice: courseForm.coursePrice, //课程的原价
            typeId: courseForm.courseTypeId, // 课程类型
            students: 0,
            rating: 0,
            reviewCount: 0,
            status: courseForm.status,
          }
          //chapters: [] // 初始章节为空数组
          //发送异步请求添加课程
          addCourse(newCourse).then(res => {
            console.log(res)
            page()
            ElMessage.success('新增成功')
          })
        }
        dialogVisible.value = false // 关闭对话框
        resetForm() // 重置表单
      } catch (error) {
        console.error('表单提交失败:', error)
      }
    }
  })
}

// 计算章节总时长的辅助函数
function calculateChapterDuration(chapter) {
  if (!chapter.sections || chapter.sections.length === 0) {
    return '00:00:00'
  }
  let totalSeconds = 0
  chapter.sections.forEach(section => {
    if (section.duration) {
      try {
        const parts = section.duration.split(':').map(Number)
        // 处理不同格式的时长：HH:MM:SS 或 MM:SS
        if (parts.length === 3) {
          const [hours, minutes, seconds] = parts
          // 确保所有值都是有效数字
          if (!isNaN(hours) && !isNaN(minutes) && !isNaN(seconds)) {
            totalSeconds += hours * 3600 + minutes * 60 + seconds
          }
        } else if (parts.length === 2) {
          const [minutes, seconds] = parts
          // 确保所有值都是有效数字
          if (!isNaN(minutes) && !isNaN(seconds)) {
            totalSeconds += minutes * 60 + seconds
          }
        }
      } catch (error) {
        console.log('解析时长出错:', error)
      }
    }
  })
  const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0')
  const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0')
  const seconds = (totalSeconds % 60).toString().padStart(2, '0')
  return `${hours}:${minutes}:${seconds}`
}

// 保存章节数据
function saveChapters() {
  console.log(currentChapters.value) // 调试输出
  // 在保存前计算并设置每个章节的总时长
  currentChapters.value.forEach(chapter => {
    const duration = calculateChapterDuration(chapter)
    chapter.chapterDuration = duration
    console.log(`章节 "${chapter.name}" 总时长: ${duration}`)
  })
  
  //获取课程id
  let courseId = currentChapterCourseId.value
  const course = {
    id: courseId,
    chaptersList: currentChapters.value
  }
  addChapter(course).then(res => {
    console.log(res)
  })
  console.log(course)
  // 查找对应的课程并更新其章节
  const courseIndex = courses.value.findIndex(c => c.id === currentChapterCourseId.value)
  if (courseIndex !== -1) {
    // 深拷贝章节数据，避免引用问题
    courses.value[courseIndex].chapters = JSON.parse(JSON.stringify(currentChapters.value))
    ElMessage.success('章节保存成功')
    chapterDialogVisible.value = false // 关闭对话框
  }
}

// 处理课程状态变更（上架/下架）
function handleStatusChange(course) {
  ElMessage.success(course.status === '1' ? '上架成功' : '下架成功')
}

// 处理图片上传 - 前端模拟上传，实际项目应调用后端API
function handleImageUpload(file) {
  // 使用FileReader读取图片为DataURL
  const reader = new FileReader()
  reader.onload = (e) => {
    courseForm.courseImage = e.target.result // 将读取结果设置为封面图
  }
  reader.readAsDataURL(file.raw) // 开始读取文件
}

// 根据类型ID获取课程类型名称
function getCourseTypeName(typeId) {
  const type = courseTypes.value.find(t => t.id === typeId)
  return type ? type.name : '未知类型'
}

// 格式化日期显示
function formatDate(dateString) {
  if (!dateString) return '' // 空值处理
  return new Date(dateString).toLocaleString('zh-CN') // 转换为本地时间格式
}

// 处理搜索
const handleSearch = () => {
  page()
}

// 处理分页大小变化
function handleSizeChange(size) {
  pagination.pageSize = size
  page()
}

// 处理当前页码变化
function handleCurrentChange(current) {
  pagination.currentPage = current
  page()
}

//分页查询
const page = () => {
  coursesPage({
    name: searchKeyword.value,
    status: filterStatus.value,
    typeId: filterType.value,
    curPage: pagination.currentPage,
    pageSize: pagination.pageSize
  }).then(res => {
    console.log(res)
    pagination.currentPage = res.data.curPage
    pagination.pageSize = res.data.pageSize
    pagination.total = res.data.total
    courses.value = res.data.dataList
  })
}


// 处理表格选中行变化
function handleSelectionChange(selection) {
  selectedCourses.value = selection
}

//富文本编辑内容
// 富文本组件引用
const editorRef = ref(null)

// 预览内容
const previewHtml = ref('')

// 获取编辑器内容
const handleGetContent = () => {
  if (editorRef.value) {
    const html = editorRef.value.getContent()
    previewHtml.value = html
    console.log('获取到的内容：', html)
  }
}

// 设置编辑器内容
const handleSetContent = () => {
  if (editorRef.value) {
    const demoContent = `
      <h3>这是一段示例内容</h3>
      <p>可以包含：</p>
      <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
      </ul>
      <p><strong>加粗文本</strong> 和 <em>斜体文本</em></p>
      <p>段落内容示例...</p>
    `
    editorRef.value.setContent(demoContent)
  }
}

// 清空内容
const handleClearContent = () => {
  if (editorRef.value) {
    editorRef.value.clearContent()
    previewHtml.value = ''
  }
}

onMounted(() => {
  // 实际项目中，这里可以添加初始化逻辑，比如从服务器加载课程数据
  // 例如：loadCourses()
  queryAllCoursesType()
  page()
});

</script>

<style scoped>
/* 整体页面布局样式 */
.admin-courses {
  display: flex;
  height: 100vh; /* 占满整个视口高度 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 确保富文本编辑器在对话框中正确显示的样式 */
:deep(.editor-container) {
  width: 100%;
  max-width: none !important;
}

/* 确保对话框中的表单项不被压缩 */
.el-dialog .el-form-item {
  margin-bottom: 20px;
}

/* 为富文本编辑器提供足够的空间 */
.el-dialog .el-form-item__content {
  min-height: 300px;
}

/* 主内容区域样式 */
.main-content {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  margin-left: 250px; /* 侧边栏展开时的左边距 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 侧边栏收起时的主内容区域样式 */
.main-content.sidebar-collapsed {
  margin-left: 54px; /* 侧边栏收起时的左边距 */
}

/* 内容区样式 */
.content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px; /* 内边距 */
  overflow: auto; /* 允许内容区水平和垂直滚动 */
}

/* 表格样式 */
.el-table {
  width: 100%; /* 宽度100% */
  /* 确保表格不会被压缩 */
}

/* 固定右侧的操作列样式 */
.el-table-column--fixed-right {
  overflow: visible; /* 允许内容溢出显示 */
}

/* 表格单元格内按钮间距 */
:deep(.el-table__cell) .el-button + .el-button {
  margin-left: 8px; /* 按钮之间的间距 */
}

/* 操作工具栏样式 */
.card-header-actions {
  display: flex; /* 水平排列子元素 */
  gap: 10px; /* 子元素之间的间隙 */
  margin-bottom: 20px; /* 底部外边距 */
  align-items: center; /* 垂直居中对齐 */
}

/* 搜索输入框样式 */
.search-input {
  width: 300px; /* 宽度固定 */
}

/* 筛选下拉框样式 */
.filter-select {
  width: 150px; /* 宽度固定 */
}

/* 分页控件样式 */
.pagination {
  margin-top: 20px; /* 顶部外边距 */
  display: flex;
  justify-content: flex-end; /* 右对齐 */
}

/* 头像上传器样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9; /* 虚线边框 */
  border-radius: 6px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停显示指针 */
  position: relative;
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 头像上传器悬停效果 */
.avatar-uploader .el-upload:hover {
  border-color: #409eff; /* 边框颜色变化 */
}

/* 上传图标样式 */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 预览图片样式 */
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.editor-page {
  padding: 20px;
}

.btn-group {
  margin: 20px 0;
  display: flex;
  gap: 15px;
}

button {
  padding: 8px 16px;
  background-color: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #34495e;
}

.preview {
  margin-top: 30px;
  padding: 20px;
  border: 1px dashed #ddd;
  border-radius: 6px;
}

.preview-content {
  margin-top: 10px;
  line-height: 1.8;
  color: #333;
}


</style>